<template>
  <div class="box">
    <div >
      <el-date-picker
        v-model="search.dataTime"
        type="datetimerange"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        value-format="YYYY-MM-DD HH:mm:ss"
        :default-time="defaultTimeOptions"
        :shortcuts="shortcuts"
        range-separator="至"
        :clearable="false"
        style="width: 340px;margin-right: 10px"
      />
      <el-input  style="width: 250px;margin-right: 10px" v-model="search.taskName" placeholder="请输入任务名称"></el-input>
      <span >
          <el-button class="action-button" size="small" @click="clearSearch" plain type="info" icon="el-icon-refresh">重置</el-button>
          <el-button class="action-button" type="primary" @click="clickSearch" plain icon="el-icon-search"> 查询</el-button>
      </span>
    </div>
    <el-button  style="margin-top: 10px" size="small" @click="taskDiff"  type="primary" icon="el-icon-s-data">任务对比</el-button>
    <!-- 表格-->
    <el-scrollbar height="calc(100vh - 170px)">
      <div style="margin-top: 15px">
        <el-table ref="table" highlight-current-row :data="reportList" style="width: 100%" size="mini" border empty-text="暂无数据" @selection-change="handleSelectionChange">
          <el-table-column  type="selection" ></el-table-column>
          <el-table-column label="序号" align="center" width="60">
            <template #default="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="reportName" label="报告名称"  align="center" width="300"></el-table-column>
          <el-table-column prop="status" label="报告状态"  width="120" align="center">
            <template #default="scope">
              <el-tag v-if="scope.row.status === '报告-已完成'" type="success">{{ scope.row.status }}</el-tag>
              <el-tag v-else-if="scope.row.status === '报告-运行失败'" type="danger">{{ scope.row.status }}</el-tag>
              <el-tag v-else-if="scope.row.status === '报告-执行中'" type="primary">{{ scope.row.status }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="taskName" label="任务名称"  align="center" width="250"></el-table-column>
          <el-table-column prop="taskType" label="任务模式"  width="120" align="center"></el-table-column>
          <el-table-column prop="pressureMode" label="压测模式" align="center" width="150"></el-table-column>
          <el-table-column prop="avgTps" label="Avg(TPS)"  width="90" align="center"></el-table-column>
          <el-table-column prop="avgCpu" label="Avg(CPU)"  width="100" align="center"></el-table-column>
          <el-table-column prop="avgMemory" label="Avg(Memory)"  width="120" align="center"></el-table-column>
          <el-table-column label="开始时间"  align="center" width="170">
            <template #default="scope">
              {{ $tools.rTime(scope.row.start_time) }}
            </template>
          </el-table-column>
          <el-table-column label="结束时间"  align="center" width="170">
            <template #default="scope">
              {{ $tools.rTime(scope.row.end_time) }}
            </template>
          </el-table-column>
          <el-table-column prop="executor" label="执行人"  align="center" width="150"></el-table-column>
          <el-table-column label="操作"  align="center" width="260px" fixed="right">
            <template #default="scope">
                <el-button @click="clickView" type="success" size="mini" plain icon="el-icon-view" >查看</el-button>
                <el-button @click='exportReport' type="primary" size="mini" plain icon="el-icon-download">导出</el-button>
                <el-button @click="delPresetting(scope.row.id)" type="danger" size="mini" plain icon="el-icon-delete">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-container">
        <el-pagination  background layout="total, prev, pager, next, jumper"
                      @current-change="currentPages"
                      :default-page-size="100"
                      :total="pages.count"
                      :current-page="pages.current"
                     next-text="下一页" prev-text="上一页">
        </el-pagination>
      </div>
    </el-scrollbar>

  </div>

</template>

<script>

export default {
  data() {
    return {
      pages: {
        current: 1,
        count: 10
      },
      reportList: [
          {
            id: 1,
            reportName: '压测报告1',
            status: '报告-已完成',
            taskName: '压测任务1',
            taskType: '普通任务',
            pressureMode: '并发模式',
            start_time: '2021-06-01 12:00:00',
            end_time: '2021-06-01 12:00:00',
            executor: 'admin',
            avgTps: '100',
            avgCpu: '50',
            avgMemory: '50'
          },
          {
            id: 2,
            reportName: '压测报告2',
            status: '报告-运行失败',
            taskName: '压测任务2',
            taskType: '定时任务',
            pressureMode: '并发模式',
            start_time: '2021-06-01 12:00:00',
            end_time: '2021-06-01 12:00:00',
            executor: 'admin'
          },
          {
            id: 3,
            reportName: '压测报告3',
            status: '报告-执行中',
            taskName: '压测任务3',
            taskType: '普通任务',
            pressureMode: '并发模式',
            start_time: '2021-06-01 12:00:00',
            end_time: '2021-06-01 12:00:00',
            executor: 'admin'
          },
      ],
      selectionConfig: {
        selectedRowKeys: [],
        selectionChange: this.handleSelectionChange
      },
      search:{
        taskName: '',
        dataTime: [this.getFormattedDate(new Date(new Date().getTime() - 6 * 24 * 60 * 60 * 1000)),
                  this.getFormattedDate(new Date(), true)],
      },
      defaultTimeOptions: ['0000-01-01 00:00:00', '0000-01-01 23:59:59'],
      shortcuts: [
        {
          text: '今天',
          value: (() => {
            const end = new Date();
            const start = new Date();
            start.setHours(0, 0, 0);
            end.setHours(23, 59, 59);
            return [start, end];
          })
        },
        {
          text: '近三天',
          value: (() => {
            const end = new Date();
            const start = new Date();
            start.setDate(end.getDate() - 2);
            start.setHours(0, 0, 0);
            end.setHours(23, 59, 59);
            return [start, end];
          })
        },
        {
          text: '近七天',
          value: (() => {
            const end = new Date();
            const start = new Date();
            start.setDate(end.getDate() - 6);
            start.setHours(0, 0, 0);
            end.setHours(23, 59, 59);
            return [start, end];
          })
        },
       {
          text: '近一个月',
          value: (() => {
            const end = new Date();
            const start = new Date();
            start.setMonth(end.getMonth() - 1);
            start.setHours(0, 0, 0); // 设置时分秒为 00:00:00
            end.setHours(23, 59, 59); // 设置时分秒为 23:59:59
            return [start, end];
          })
        }],

    }
  },
  mounted() {

  },
  computed: {

  },
  methods: {
    handleSelectionChange(selected) {
      this.selectionConfig.selectedRowKeys = selected.map(item => item.id);
    },

    currentPages(currentPage) {
      this.getPresetting(1)
      this.pages.current = currentPage

    },

    convertToTimeZoneFormat(dateStr, timeZone) {
      const moment = require('moment-timezone');
      const m = moment.tz(dateStr, timeZone);
      return m.format('YYYY-MM-DD HH:mm:ss'); // 格式化为年月日时分秒
    },

    getFormattedDate(date, endOfDay = false) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      let hours, minutes, seconds;

      if (endOfDay) {
        hours = '23';
        minutes = '59';
        seconds = '59';
      } else {
        hours = '00';
        minutes = '00';
        seconds = '00';
      }

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  },

    clearSearch() {
      this.search = {
        taskName: '',
        dataTime: [this.getFormattedDate(new Date(new Date().getTime() - 6 * 24 * 60 * 60 * 1000)),
                      this.getFormattedDate(new Date(), true)]
        }
    },

    clickSearch() {

    },
    clickView() {
      this.$router.push({ name: 'PerformanceResult-Detail' });
    },


    taskDiff() {
      if (this.selectionConfig.selectedRowKeys.length < 2){
          this.$message({
            type: 'warning',
            message: '请最少勾选两个数据进行对比',
            duration: 1000
          });
      }
      console.log(this.selectionConfig.selectedRowKeys)
    },

    async exportReport() {
      await this.$api.exportTaskScence()
      // if (response.status === 200){
      //   const blob = new Blob([response.data], { type: 'application/vnd.ms-excel' });
      //   const link = document.createElement('a');
      //   link.href = URL.createObjectURL(blob);
      //   link.click();  // 模拟点击下载
      //
      // }



    },

  },

  created() {

  }

}
</script>

<style scoped>
.box{
  padding:15px;
}
.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
/deep/ .el-scrollbar__bar {
  display: none;
}
</style>